<template>

    <el-card class="box-card">
    <div slot="header" class="clearfix">
        <span>用户列表</span>
        <!-- 上传文件表单 -->
        
      
        <form action="http://localhost:8088/inputExcel"  enctype="multipart/form-data"  method="post" target="nm_iframe" style="float:right">
          <input type="file"  name="filename" id = "file" accept="application/vnd.ms-excel" class="inputfile">
          <label for="file">选择导入文件</label>
          <input type="submit" class="submit" @click="uploadInfo">
        </form>
      
        

        <iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>  
          <!-- <a href="javascript:;" class="file">导入列表
            <input type="file" name="excelFile" :onchange="uploadFile">
          </a> -->
        <el-button style="float: right;margin-right:15px" type="primary" @click="dialogFormVisible = true">添加新用户</el-button>
    </div>
    <!-- 用户信息列表 -->
   <div class="app-container">
    <el-table :data="userList" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label='用户ID' width="100" prop="id">
        
      </el-table-column>
      
      <el-table-column label="账户名" width="120" align="center" prop="loginName">
        <!-- <template slot-scope="scope">
          <span>{{userList.loginName}}</span>
        </template> -->
      </el-table-column>
      <!-- <el-table-column label="密码" width="100" align="center" prop="password"> -->
        <!-- <template slot-scope="scope">
          {{userList.password}}
        </template> -->
      <!-- </el-table-column> -->
      <el-table-column label="姓名" width="120" align="center" prop="realName">
        <!-- <template slot-scope="scope">
          {{userList.realName}}
        </template> -->
      </el-table-column>
      <el-table-column label="用户角色" width="140" align="center" prop="roleId">
        <!-- <template slot-scope="scope">
          {{userList.roleId}}
        </template> -->
      </el-table-column>
      <el-table-column label="责任上级"  align="center" prop="leaderName">
        <!-- <template slot-scope="scope">
          {{userList.leaderId}}
        </template> -->
      </el-table-column>
      <!-- <el-table-column class-name="status-col" label="Status" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column align="center" prop="updateTime" label="添加时间">
        <!-- <template slot-scope="scope"> -->
          <!-- <i class="el-icon-time"></i> -->
          <!-- <span>{{userList.updateTime}}</span>
        </template> -->
      </el-table-column>
    </el-table>
  </div>
  <!-- 添加用户popover -->
  <div class="popForm">
    <el-dialog title="填写详细信息" :visible.sync="dialogFormVisible" center>
    
      <el-form :model="form" status-icon :rules="rules2" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="添加账户:" prop="userName" >
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="form.pass" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="form.checkPass" auto-complete="off"></el-input>
        </el-form-item>
    
        <el-form-item label="设置姓名:" prop="realName" >
          <el-input v-model.number="form.realName"></el-input>
        </el-form-item>
        <el-form-item label="设置权限:" prop="permission">
          <el-radio-group v-model="form.permission">
            <el-radio label="领导"></el-radio>
            <el-radio label="上级领导"></el-radio>
            <el-radio label="普通员工"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="设置上级:" prop="leader">
          <el-select v-model="form.leader" placeholder="请选择上级领导">
            <el-option v-for="(item,index) in leaderMap" :key="index" :label="item.realName" :value="item.id"></el-option>
            <!-- <el-option :label="王五" :value="beijing"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">提交</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
        
      </el-form>
     
    </el-dialog>
    </div>
    <div class="block" style="margin:20px;height:20px;float:right">
      <el-pagination style="float:right" background page-size="5" layout="prev, pager, next" :current-page="page"  :total="pageNum" @current-change="changPage">
      </el-pagination>
    </div>

    <!-- 工作日设定提示框 锁死-->
            <el-dialog
              title="提示"
              :visible.sync="dialogVisible1"
              width="40%"
              :before-close="handleClose">
              <span style="font-size:20px;line-height:35px">您尚未设定工作日，请先<span style="color:red">设定工作日</span>，再进行其他操作！</span>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="gotoWorkDay">转到工作日管理</el-button>
                <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
              </span>
            </el-dialog>
    </el-card>
</template>

<script>
import qs from "qs";

export default {
  data() {
    
    var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.form.checkPass !== '') {
            this.$refs.form.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    //账户验证判定结束
    return {
      list: [
      ],
      rules2: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        // age: [
        //   { validator: checkAge, trigger: 'blur' }
        // ]
      },

      listLoading: false,
      dialogFormVisible: false,
      form: {
        realName: "",
        userName: "",
        pass: "",
        checkPass: "",
       
        leader: "",
        permission: ""
        // type: [],
      },
      formLabelWidth: "120px",
      // 用户列表
      userList: [
        {
          id: "",
          updateTime: "",
          loginName: "",
          realName: "",
          password: "",
          leaderId: "",
          roleId: ""
        }
      ],
      leaderMap:[],   //保存上级领导的信息表
      pageNum:0,
      page:1,
      fileList: []
    };
  },
  created() {
    this.$axios
      .post("http://localhost:8088/getAllUsers", qs.stringify({}), {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
      .then(res => {
        console.log(res.data.data[0]);
        this.$store.commit("user_List", res.data.data[0]);
        this.userList = res.data.data[0];
        this.pageNum = res.data.data[1]*5
        let self = this;
        for (let i in this.userList) {
          // this.userList[i].roleId
          if (this.userList[i].roleId === 1) {
            this.userList[i].roleId = "管理员";
          } else if (this.userList[i].roleId === 2) {
            this.userList[i].roleId = "领导";
          } else if (this.userList[i].roleId === 3) {
            this.userList[i].roleId = "上级领导";
          } else {
            this.userList[i].roleId = "员工";
          }
        }

        // 判定是否设置了工作日
        let value = window.localStorage.getItem("setDay")
        let flag = value ==="false" ? false : true;
        console.log(flag)
        if(!flag){
          console.log("flag")
          this.dialogVisible1 = true
        }
      })
      .catch(err => {
        console.log(err);
      });
     
     //获取领导信息列表
      this.$axios
      .post("http://localhost:8088/getAllLeaders", qs.stringify({}), {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
      .then(res => {
        console.log(res.data.data);
        // this.leaderMap = res.data.data
        let a =  res.data.data
        
        for (let i in a){
          let obj = {}
          this.$set(obj,"realName",a[i].realName)
          this.$set(obj,"id",a[i].id)
          this.leaderMap.push(obj)
        }
      })
      .catch(err => {
        console.log(err);
      });
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  mounted() {},
  methods: {
    
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
     //分页点击切换
    changPage (val){
      this.page = val
      console.log(val)
      this.$axios
      .post(
        "http://localhost:8088/getAllUsers",
        qs.stringify({
          // dateNum: this.countNum+"",
          currentPage:val
        }),
        {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        }
      )
      .then(res => {
        console.log(res.data.data[0]);
        this.userList = res.data.data[0]
        this.pageNum = res.data.data[1]*5
      })
      .catch(err => {
        console.log(err);
      });
    },

    submitForm(form) {
      
      console.log(this.form);
      let RoleId =  this.form.permission
      if(RoleId == "普通员工"){
        RoleId = 4
      }else if(RoleId == "上级领导"){
         RoleId = 3
      }else if(RoleId == "领导"){
         RoleId = 2
      }
     
      this.$axios
        .post(
          "http://localhost:8088/addUser",
          qs.stringify({
            loginName: this.form.userName,
            password: this.form.pass,
            realName: this.form.realName,
            roleId: RoleId,
            leaderId: this.form.leader

            // punchTime:this.time
          }),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(res => {
          console.log(res);
          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '提交成功',
            type: 'success'
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    uploadInfo (){
      this.$notify({
        title: '成功',
        message: '提交成功',
        type: 'success'
      });
    },
    gotoWorkDay (){
      // console.log(1)
      this.dialogVisible1 = false
      this.$router.push({path:"/workDay/workDay"})  
    },
    handleClose (){

    }
  }
};
</script>


<style lang="scss" scoped>
.text {
  font-size: 20px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.clearfix {
  span {
    font-size: 20px;
    line-height: 40px;
  }
}
.box-card {
  margin: 10px;
}

.app-container {
  padding: 0;
}

// element upload
.upload-demo {
  float: right;
}

// 按钮的样式
// .file {
//   position: relative;
//   display: inline-block;
//   float: right;
//   margin-right: 15px;
//   background: #409eff;
//   // border: 1px solid #99D3F5;
//   border-radius: 4px;
//   padding: 10px 22px;
//   overflow: hidden;
//   color: white;
//   text-decoration: none;
//   text-indent: 0;
//   line-height: 20px;
//   font-size: 14px;
// }
// .file input {
//   position: absolute;
//   font-size: 100px;
//   right: 0;
//   top: 0;
//   opacity: 0;
// }
// .file:hover {
//   background: #66b1ff;
//   // border-color: #78C3F3;
//   color: white;
//   text-decoration: none;
// }


.inputfile {
    cursor: pointer;
    width: 0.1px; 
    height: 0.1px; 
    opacity: 0; 
    overflow: hidden; 
    position: absolute; 
    z-index: -1;
}
.inputfile + label,.submit {
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    padding: 9px;
    border-radius: 3px;
    color: white;
    background-color: #409eff;
    display: inline-block;
    border: none;
}
.submit{
  padding: 9px 20px;
  margin: 0 10px;
  
}
.inputfile:focus + label,
.inputfile + label:hover {
    background-color: #66b1ff;
}

</style>
